<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-17 16:25:43
-->
<template>
    <div class="official-item">
        <el-row>
            <el-col :span="4">
                <div class="left">
                    <div class="left-img" @mouseenter="showIcon" @mouseleave="closeIcon">
                        <div class="time">
                            {{ time }}更新
                        </div>
                        <img :src="item.coverImgUrl" alt="">

                        <transition enter-active-class="animate__animated animate__fadeIn"
                            leave-active-class="animate__animated animate__fadeOut">
                            <div class="mask-playicon ex" v-show="isShowPlay">
                                <span class="iconfont icon-shipinbofangshibofang exa"></span>
                            </div>
                        </transition>
                    </div>
                </div>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="17">
                <div class="right">
                    <div class="right-item" v-for="(ele, index) in songs" :key="ele.al.id">
                        <div class="item-left">
                            <span class="rank" :class="(index < 3) ? 'toprank' : ''">{{ index + 1 }}</span>
                            <span class="name">{{ ele.name }}</span>
                            <span v-if="ele.alia.length != 0" class="info">({{ ele.alia[0] }})</span>
                        </div>
                        <div class="item-right">
                            <span v-for="(e,index) in ele.ar" :key="index">/{{ e.name }}</span>
                        </div>
                    </div>
                    <div class="more">
                        <span>查看全部</span>
                        <el-icon>
                            <ArrowRight />
                        </el-icon>
                    </div>
                </div>
            </el-col>
        </el-row>



    </div>
</template>

<script setup>
import 'animate.css';
//引入vueuse
import { useDateFormat } from '@vueuse/core'
import { getSongListDeatail } from '../../../../api/songlistdetail/songlistdetail'
import { onMounted, ref, getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
let isShowPlay = ref(false)
defineProps({
    item: {
        type: Object,
        default: {}
    }
})
//格式化时间
let time = useDateFormat(instance.props.item.updateTime, 'MM月DD日')

//保存前五个歌曲
let songs = ref([])

function showIcon() {
    isShowPlay.value = true
}
function closeIcon() {
    isShowPlay.value = false
}

//发送请求获取歌单详细排行数据 前五个歌曲信息
async function getData() {
    let res = await getSongListDeatail(instance.props.item.id)
    if (res.status === 200) {
        songs.value = res.data.playlist.tracks.slice(0, 5)
    }
}

onMounted(() => {
    getData()

})
</script> 

<style lang="scss" scoped>
.official-item {
    margin-top: 10px;
    margin-bottom: 15px;

    .left {
        height: 215px;
        width: 191px;
        margin-right: 30px;

        &-img {
            cursor: pointer;
            position: relative;
            height: 185px;
            width: 191px;

            img {
                height: 100%;
                width: 100%;
            }

            .time {
                position: absolute;
                top: 62%;
                color: white;
                left: 50px;
            }
        }
    }

    .right {
        &-item {
            display: flex;
            justify-content: space-between;
            height: 35px;
            line-height: 35px;
            border: 1px solid #fafafa;

            .item-left {
                .rank {
                    margin-right: 20px;
                    color: #9c9c9c;
                }

                .info {
                    margin-left: 5px;
                    color: #9c9c9c;
                }
            }

            .item-right {
                margin-right: 10px;
                span {
                    color: #9c9c9c;
                    
                    font-size: 10px;
                }
            }
        }

        .more {
            cursor: pointer;
            display: flex;
            align-items: center;
            color: #9c9c9c;
            margin-top: 8px;

            span {
                margin-right: 5px;
            }

            span:hover {
                color: black;
            }
        }
    }


    .right-item:nth-child(odd) {
        background-color: #fafafa;
    }

    .right-item:hover {
        background-color: #f5f5f5;
    }
}

.exa {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    background: none;

    background-color: #e5eff8;
}

.ex {
    background: none;
}

.toprank {
    color: #fb544e !important;
}
</style>